import { gradualColorRampList } from '#/assets/style';
import { getColorArray } from '#/utils';

class GradualValueRender {
  constructor(map) {
    this.map = map;
    this.colorRampList = gradualColorRampList;
  }

  // 类方法重写外部方法
  getColorRampArray = (colorRampName, uniqueValueNum) => {
    const colorRamp = this.colorRampList.find(
      (ramp) => ramp.name === colorRampName,
    ).ramp;
    return getColorArray(colorRamp, uniqueValueNum);
  };

  gradualValueRenderEntry(options) {
    switch (options.layerType) {
      case 'circle': {
        return this.pointGradualValueRender(options);
      }
      case 'fill': {
        return this.polygonGradualValueRender(options);
      }
      case 'line': {
        return this.polylineGradualValueRender(options);
      }
    }
  }

  pointGradualValueRender(options) {
    const { layerId, renderField, uniqueValues, colorRamp, layout, paint } =
      options;
    const colorRampArray = this.getColorRampArray(
      colorRamp,
      uniqueValues.length,
    );
    const paintExpressionArr = [];
    paintExpressionArr.push('case');
    for (const [i, uniqueValue] of uniqueValues.entries()) {
      paintExpressionArr.push(
        ['==', ['get', renderField], uniqueValue],
        colorRampArray[i],
      );
    }
    paintExpressionArr.push('#000000');
    // 清空原先的图层属性
    const paintProps = this.map.getLayer(layerId).paint;
    Object.keys(paintProps).forEach((key) => {
      this.map.setPaintProperty(layerId, key, null);
    });
    Object.keys(layout).forEach((key) => {
      this.map.setLayoutProperty(layerId, key, layout[key]);
    });
    Object.keys(paint).forEach((key) => {
      this.map.setPaintProperty(layerId, key, paint[key]);
    });
    this.map.setPaintProperty(layerId, 'circle-color', paintExpressionArr);
  }

  polygonGradualValueRender(options) {
    const { layerId, renderField, uniqueValues, colorRamp, layout, paint } =
      options;
    // const colorRampArray = this.getColorRampArray(colorRamp, uniqueValues.length)
    const colorRampArray = this.getColorRampArray(
      colorRamp,
      uniqueValues.length,
    );
    const paintExpressionArr = [];
    paintExpressionArr.push('case');

    for (const [i, uniqueValue] of uniqueValues.entries()) {
      paintExpressionArr.push(
        ['==', ['get', renderField], uniqueValue],
        colorRampArray[i],
      );
    }
    paintExpressionArr.push('#000000');
    Object.keys(layout).forEach((key) => {
      this.map.setLayoutProperty(layerId, key, layout[key]);
    });
    Object.keys(paint).forEach((key) => {
      this.map.setPaintProperty(layerId, key, paint[key]);
    });
    this.map.setPaintProperty(layerId, 'fill-color', paintExpressionArr);
  }

  polylineGradualValueRender(options) {
    const { layerId, renderField, uniqueValues, colorRamp, layout, paint } =
      options;
    const colorRampArray = this.getColorRampArray(
      colorRamp,
      uniqueValues.length,
    );
    const paintExpressionArr = [];
    paintExpressionArr.push('case');
    for (const [i, uniqueValue] of uniqueValues.entries()) {
      paintExpressionArr.push(
        ['==', ['get', renderField], uniqueValue],
        colorRampArray[i],
      );
    }
    paintExpressionArr.push('#000000');
    Object.keys(layout).forEach((key) => {
      this.map.setLayoutProperty(layerId, key, layout[key]);
    });
    Object.keys(paint).forEach((key) => {
      this.map.setPaintProperty(layerId, key, paint[key]);
    });
    this.map.setPaintProperty(layerId, 'line-color', paintExpressionArr);
  }
  // getColorRampArray(colorRamp, uniqueValueNum) {
  //   const gradualRamp = this.colorRampList.find(ramp => ramp.name === colorRamp).ramp
  //   if (uniqueValueNum <= 2) {
  //     return [`rgb(${gradualRamp.start.R}, ${gradualRamp.start.G}, ${gradualRamp.start.B})`, `rgb(${gradualRamp.end.R}, ${gradualRamp.end.G}, ${gradualRamp.end.B})`]
  //   } else {

  //     const startR = gradualRamp.start.R
  //     const startG = gradualRamp.start.G
  //     const startB = gradualRamp.start.B

  //     const endR = gradualRamp.end.R
  //     const endG = gradualRamp.end.G
  //     const endB = gradualRamp.end.B

  //     const stepR = ((endR - startR) / (uniqueValueNum - 1)).toFixed(6)
  //     const stepG = ((endG - startG) / (uniqueValueNum - 1)).toFixed(6)
  //     const stepB = ((endB - startB) / (uniqueValueNum - 1)).toFixed(6)

  //     const colorRampArray = []
  //     for (let i = 0; i < uniqueValueNum - 1; i++) {
  //       colorRampArray.push(`rgb(${startR + stepR * i}, ${startG + stepG * i}, ${startB + stepB * i})`)
  //     }
  //     colorRampArray.push(`rgb(${endR}, ${endG}, ${endB})`)
  //     return colorRampArray
  //   }
  // }
}
// const a = 'eb'
// console.log(parseInt(a, 16))

export default GradualValueRender;
